import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { wp, hp, sp } from '../utils/layout';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../navigation/types';

const HomeScreen = () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

  return (
    <View style={styles.container}>
      {/* AI助理悬浮按钮 */}
      <TouchableOpacity
        style={styles.aiFloatingButton}
        onPress={() => navigation.navigate('Ceshi')}
        activeOpacity={0.8}
      >
        <View style={styles.aiButtonInner}>
          <Icon name="psychology" size={28} color="#FFFFFF" />
          <Text style={styles.aiButtonText}>{'AI\n助\n理'}</Text>
        </View>
      
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F8F9FB',
  },
  title: {
    fontSize: sp(24),
    fontWeight: 'bold',
  },
  aiFloatingButton: {
    position: 'absolute',
    right: wp(12),
    bottom: hp(24),
    backgroundColor: '#007AFF',
    borderRadius: 24,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    padding: wp(6),
  },
  aiButtonInner: {
    flexDirection: 'column',
    alignItems: 'center',
    paddingHorizontal: wp(4),
    paddingVertical: hp(2),
  },
  aiButtonText: {
    color: '#FFFFFF',
    fontSize: sp(14),
    fontWeight: '600',
    marginTop: hp(4),
    textAlign: 'center',
    lineHeight: sp(18),
  },
});

export default HomeScreen;